<template>
  <view class="recharge-detail" v-if="info.pondId">
    <view class="detail-title">第{{chineseNumbers[info.periods*1]}}次{{info.pondType == '2'?'荷宝':'荷花'}}满塘 <span class="sub-theme">{{info.totalPrice}}</span> 元</view>
    <view class="detail-list">
      <view class="list-item" v-for="(item,idx) in list" :key="idx">
        <view class="item-info">
          <view class="h2">{{item.userName}}</view>
          <view class="p">{{item.storeName}}</view>
          <view class="p">{{item.transactionTime}}</view>
        </view>
        <view class="item-price">+{{item.amount}}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        pondId:'',
        list:[],
        info:{},
        params:{
          page:1,
          pageSize:10
        },
        chineseNumbers: ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
      };
    },
    onLoad(ops) {
      this.pondId = ops.pondId
      this._initData(ops.pondId)
      uni.setNavigationBarTitle({
        title:ops.type == '1'?'荷花池充盈明细':'荷宝池充盈明细'
      })
    },
    onReachBottom() {
      if(this.params.total > this.list.length){
        ++this.params.page;
        this._initData(this.pondId)
      }else{
        this.moreStatus="no-more"
      }
    },
    methods:{
      
      ///    network
      _initData(pondId){  //   初始化数据
        const data = {
          ...this.params,
          pondId
        }
        uni.showLoading({
          title:"加载中..."
        })
        this.$post('/yahe/pond/pondDetails',data,'1').then(res=>{
          if(res.code == '1'){
            this.info = res.content
            this.list = [...this.list,...res.content.details.records]
            this.params.total = res.content.details.total
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.recharge-detail{
  min-height: 100vh;
  background: var(--page-bg);
  .detail-title{
    line-height: 88rpx;
    color: #6D6D6D;
    padding: 0 24rpx;
    font-size: 28rpx;
    .sub-theme{
      margin: 0 12rpx;
    }
  }
  .detail-list{
    background: #fff;
    padding: 0 24rpx;
    .list-item{
      padding: 24rpx 0;
      border-bottom: 2rpx solid #efefef;
      display: flex;
      align-items: center;
      &:last-child{
        border-bottom: 0;
      }
      .item-info{
        flex: 1;
        margin-right: auto;
        font-size: 24rpx;
        .h2{
          font-size: 28rpx;
          font-weight: bold;
        }
        .p{
          color: #6D6D6D;
          margin-top: 10rpx;
        }
      }
      .item-price{
        font-size: 30rpx;
        color: var(--sub-theme);
      }
    }
  }
}
</style>
